<template>
	<view class="total">
		<view class="dining_messages">
			<view class="massages">
				<text class="place">城市食堂(经典时代)</text>
			</view>
		</view>
		<view class="orders clearfix">
			<view class="time-Number">
				<text>用餐时间:{{ formatTime(orderData.createTime) }}</text>
				<text>桌号:{{ orderData.tableNum }}</text>
				<text>用餐人数:{{ orderData.dinnerNum }}人</text>
				<text>订单编号:{{ orderId }}</text>
			</view>
			<view class="orders_detailed" v-for="(item, index) in orderFoodData" :key="item.id">
				<view>
					<view class="orderItem">
						<image :src="item.image" mode=""></image>
						<view class="Order-content">
							<view class="dishes">
								<view class="title">
									<text>{{item.tasteName}}</text>
									<view class="single_amount">
										<u-icon name="rmb" color="#000000" size="28rpx" bold="ture"></u-icon>
										<text class="price">{{parseFloat(item.price)}}</text>
									</view>
								</view>
									<text>{{item.size}}</text>
									<text class="quantity">x{{orderFoodNum[index].number}}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- <view class="remark">
				<text v-if="!inputValue" class="num" @click="inputValue = true">备注</text>
				<u--input
					v-if="inputValue"
				    placeholder="请输入内容"
				    border="surround"
				    v-model="value"
					@change="change"
					@confirm="confrim"
				  ></u--input>
			<u-icon  v-if="!inputValue" name="arrow-right" size="18"></u-icon>
			</view> -->
			<view class="total-price" style="font-size: 45rpx;">
				<text>合计：</text>
				<u-icon name="rmb" color="red" size="22" bold="ture"></u-icon>
				<text class="t-price">{{orderData.totalPrice}}</text>
			</view>
		</view>
		<view class="settlement">
			<view class="button" @click="orderFood">
				<u-icon name="file-text" size="50rpx" color="#000000"></u-icon>
				<text>继续点餐</text>
			</view>
			<view class="button" @click="toAccount">
				<u-icon name="checkbox-mark" size="50rpx" color="#000000"></u-icon>
				<text>去结算</text>
			</view>
		</view>
	</view>
</template>

<script>
	import { placeOrder, byOrderId_foodDetail, byOrderId_OrderDetail, byOrderId_OrderNum } from '@/common/http.api.js'
	export default {
		data() {
			return {
				stores: [],
				seatValue:'',
				tableSeat:'',
				time:'',
				totalMoney:'',
				shopData:this.$store.state.shopData,
				orderNum:'',
				orderId: '',
				orderData: {},
				orderFoodData:[],
				orderFoodNum: [],
				value:'',
				inputValue: false,
			}
		},
		methods: {
			change(){
				this.inputValue = true
			},
			confrim(){
				this.inputValue = false
			},
			// 返回点餐页面
			orderFood(){
				uni.navigateTo({
					url: `/pagesA/home/scanning/scanning`
				}) 
			},
			//去结算页面
			toAccount(){
				uni.navigateTo({
					url: `/pagesA/home/closeAccount/closeAccount?orderId=${this.orderId}`
				})
			},
			formatTime(time) {
				const orderTime = time ? new Date(parseInt(time)) : new Date()
				const year = orderTime.getFullYear()
				const mm = (orderTime.getMonth() + 1) < 10 ? ('0' + (orderTime.getMonth() + 1)) : (orderTime.getMonth() + 1)
				const dd = orderTime.getDate() < 10 ? ('0' + orderTime.getDate()) : orderTime.getDate()
				const hh = orderTime.getHours() < 10 ? ('0' + orderTime.getHours()) : orderTime.getHours()
				const min = orderTime.getMinutes() < 10 ? ('0' + orderTime.getMinutes()) : orderTime.getMinutes()
				const ss = orderTime.getSeconds() < 10 ? ('0' + orderTime.getSeconds()) : orderTime.getSeconds()
				return `${year}-${mm}-${dd} ${hh}:${min}:${ss}`
			}
		},
		onLoad(obj) {
			this.orderId = obj.orderId
			placeOrder().then( res => {
				this.stores = res.rows
			})
			
			byOrderId_OrderDetail(obj.orderId).then( res => {
				this.orderData = res.data
				// console.log(this.orderData, 'this.orderData')
			})
			Promise.all([ byOrderId_foodDetail(obj.orderId), byOrderId_OrderNum(obj.orderId) ]).then( res => {
				// console.log(res)
				this.orderFoodData = res[0].rows
				this.orderFoodNum = res[1].rows
			})
		}
	}
</script>

<style>
	page {
		background-color: #f7f8fc;
	}

	.total {
		width: 100%;
		border-bottom: 1rpx solid #f7f8fc;
	}

	.dining_messages {
		border-radius: 20rpx;
		background-color: #fff;
		margin: auto;
		width: 700rpx;
		height: 150rpx;
		text-align: center;
		border: 1rpx solid #fff;
	}
	.remark{
		margin: 15rpx;
		box-sizing: border-box;
		width: 95%;
		height: 90rpx;
		display: flex;
		font-size: 30rpx;
		justify-content: center;
		align-items: center;
		background-color: #fff;
		border-radius: 20rpx;
	}
	.num{
		margin-left: 10rpx;
		flex: 1;
	}
	.dining_messages .massages {
		margin: 30rpx;

	}

	.dining_messages .massages .place {
		font-weight: bold;
		font-size: 50rpx;
		color: black;
	}

	.orders {
		border-radius: 20rpx;
		margin: 40rpx auto 200rpx auto;
		width: 90%;
		background-color: #fff;
		border: 1rpx solid #fff;
	}

	.orders .time-Number {
		font-size: 25rpx;
		color: #8a8a8a;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		height: 50rpx;
		margin: 20rpx;
		margin-top: 10rpx;
	}

	.orders_detailed {
		margin: 30rpx 20rpx;
	}
	
	.orders_detailed .orderItem{
		display: flex;
		margin: 15rpx;
	}
	
	.orders_detailed image {
		height: 100rpx;
		width: 100rpx;
		border-radius: 10rpx;
	}

	.orders .orders_detailed .Order-content {
		flex: 1;
		margin-left: 15rpx;
	}

	.orders .orders_detailed .Order-content .dishes .title {
		display: flex;
		justify-content: space-between;
	}

	.orders .orders_detailed .Order-content .dishes .title text {
		font-size: 30rpx;
		font-weight: bold;
		color: #000;
	}

	.orders .orders_detailed .Order-content .dishes .title .single_amount {
		display: flex;
	}

	.orders .orders_detailed .Order-content .dishes .title .single_amount .price {
		font-size: 35rpx;
	}

	.clearfix::after {
		content: "";
		display: block;
		clear: both;
	}

	.total-price {
		font-weight: bold;
		float: right;
		margin: 20rpx;
		margin-right: 40rpx;
		display: flex;
	}

	.total-price .t-price {
		color: red;
	}

	.Order-content .dishes text {
		display: block;
		font-size: 25rpx;
		color: #8a8a8a;
	}

	.settlement {
		width: 100%;
		height: 200rpx;
		position: fixed;
		bottom: 0;
		display: flex;
		justify-content: space-between;
	}

	.total .settlement .button {
		width: 120rpx;
		height: 120rpx;
		/* background-color: red; */
		border-radius: 50%;
		border: 1rpx solid #000000;
		text-align: center;
		margin: 30rpx;
	}

	.total .settlement .button .u-icon {
		width: 50rpx;
		margin: 0 auto;
	}

	.total .settlement .button text {
		font-size: 25rpx;
		color: #000000;
		
	}
</style>
